<template>
	<a-comment>
		<template #actions>
			<span key="comment-basic-like">
				<a-tooltip title="点赞">
					<template v-if="action === 'liked'">
						<LikeFilled @click="like" />
					</template>
					<template v-else>
						<LikeOutlined @click="like" />
					</template>
				</a-tooltip>
				<span style="padding-left: 8px; cursor: auto">
					{{ likes }}
				</span>
			</span>
			<span key="comment-basic-dislike">
				<a-tooltip title="点踩">
					<template v-if="action === 'disliked'">
						<DislikeFilled @click="dislike" />
					</template>
					<template v-else>
						<DislikeOutlined @click="dislike" />
					</template>
				</a-tooltip>
				<span style="padding-left: 8px; cursor: auto">
					{{ dislikes }}
				</span>
			</span>
			<span key="comment-basic-reply-to">回复</span>
		</template>
		<template #author><a style="color: #333;">Han Solo</a></template>
		<template #avatar>
			<a-avatar shape="circle" size="medium" style="background-color: #ccc; cursor: pointer;" alt="Han Solo">
				<template #icon>
					<UserOutlined />
				</template>
			</a-avatar>
		</template>
		<template #content>
			<p class="content">
				We supply a series of design principles, practical patterns and high quality design
				resources (Sketch and Axure), to help people create their product prototypes beautifully and
				efficiently.
			</p>
		</template>
		<template #datetime>
			<a-tooltip :title="dayjs().format('YYYY-MM-DD HH:mm:ss')">
				<span>{{ dayjs().fromNow() }}</span>
			</a-tooltip>
		</template>
	</a-comment>
</template>
<script setup>
import { ref } from 'vue'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);
const likes = ref(0);
const dislikes = ref(0);
const action = ref();
const like = () => {
	likes.value = 1;
	dislikes.value = 0;
	action.value = 'liked';
};
const dislike = () => {
	likes.value = 0;
	dislikes.value = 1;
	action.value = 'disliked';
};
</script>
<style scoped>
.content {
	background-color: #FFF;
	border-radius: 16px;
	padding: 16px;
}
</style>